<template>
    <div>
        <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>

        <div id="main" :style="{width: '600px', height: '400px',margin:'0px auto',marginTop:'20px'}">

        </div>
    </div>
</template>
<script>
    // 引入基本模板
    let echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/bar');
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');


    export default {
        data () {
            return {
                columns8: [
                    {
                        "title": "学历",
                        "key": "education",
                        "fixed": "left",
                        "width": 300
                    },
                    {
                        "title": "人数",
                        "key": "number",
                        "width": 250
                    }
                ],
                data7: [
                    {
                        "education": "初中",
                        "number": 0
                    },
                    {
                        "education": "高中",
                        "number": 2
                    },
                    {
                        "education": "大专",
                        "number": 5
                    },
                    {
                        "education": "大本",
                        "number": 149
                    },
                    {
                        "education": "硕士",
                        "number": 133
                    },
                    {
                        "education": "博士",
                        "number": 6
                    }
                ]
            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '人才学历分布图',left:'center' },
                    tooltip: {},
                    xAxis: {
                        data: ["初中", "高中", "大专", "大本", "硕士", "博士"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: [0,2,5,149,133,6]
                    }]
                });
            }
        }
    }
</script>